<template name='imgsBanner'>
		<view class="imgsBannerBox">
			<swiper class="imgsBanner_swiper" :current='comCurrentImg' @change='changCurrent'>
				<swiper-item v-for="(item,index) in imgList" :key='index'>
					<image :src="item" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- 图片位置 -->
			<view class="imgLength">{{(comCurrentImg+1)+'/'+(imgList.length)}}</view>
			<scroll-view scroll-x="true" show-scrollbar="true" class="scrollImgList">
				<view  v-for="(item,index) in imgDatas" :key='index' class="scroll-item" :class="comCurrentImg==index?'activeImageItem':''" @click="onClickImg(index)" :id="'item'+index">
					<view class="scrollPad width">
						<view class="fz scrollTitle width">{{item.duration}}</view>
						<view class="flex">
							<text class="red fw ">¥{{item.now_price}}</text>
							<text class="line-del fz">¥{{item.del_price}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
</template>

<script>
	export default {
		name:'imgsBanner',
		props:{
			imgList:{
				type:Array,
				value:[]
			},
			currentImg:{
				type:Number,
				value:0
			},
			imgDatas:{
				type:Array,
				value:[]
			}
		},
		data() {
			return {
				comCurrentImg:0,
				scrollImgList:0,
				imgLeftList:[]
			};
		},
		created() {
			this.comCurrentImg = this.currentImg;
			
		},
		mounted() {
			uni.getSystemInfo({
			    success: (res)=> {
					this.imgList.forEach((i,v)=>{
						let info = uni.createSelectorQuery().in(this);
						info.select("#item"+v).boundingClientRect((res)=>{
						    this.imgLeftList.push(res.left)
						}).exec()
					})
					this.imgListScroll(this.comCurrentImg)
			    }
			});
		},
		methods:{
			onClickImg(index){
				this.comCurrentImg = index
				this.imgListScroll(index)
			},
			changCurrent(e){
				this.comCurrentImg = e.target.current
				this.imgListScroll(e.target.current)
			},
			// 图片滑动
			imgListScroll(index){
				this.$emit('getIndex',index)
				if(index>=2){
					this.scrollImgList = this.imgLeftList[index-2]
				}else{
					this.scrollImgList = 0
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.imgsBannerBox{
	position: relative;
}
.imgLength{
	position: absolute;
	top: 395rpx;
	right: 24rpx;
	background:rgba(0,0,0,0.6);
	padding: 0 12rpx;
	line-height: 32rpx;
	font-size: 22rpx;
	border-radius: 10rpx;
	color: #fff;
}
.imgsBanner_swiper{
	width: 750rpx;
	height: 450rpx;
	margin-bottom: 24rpx;
	swiper-item{
		width: 100%;
		height: 100%;
		image{
			width: 100%;
			height: 100%;
			
		}
	}
}

.scrollImgList{
	white-space: nowrap;
	overflow: hidden
	::-webkit-scrollbar {
		width: 0;
		height: 0;
	}
	.scroll-item{
		width: 284rpx;
		height: 132rpx;
		margin-right: 16rpx;
		display: inline-block;
		border: 1rpx solid rgb(214,215,219);
		border-radius: 1px;
		box-sizing: border-box;
		&:nth-child(1) {
			margin-left: 20rpx;
		}
	}
	.activeImageItem{
		border: 1rpx solid #59b195;
		background-color: rgb(238,255,249);
	}
	.scrollPad {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.scrollTitle {
			margin-bottom: 8rpx;
		}
		.red {
			font-size: 35rpx;
			padding: 3rpx 6rpx;
			background-color: rgb(255,240,237);
		}
		.line-del {
			margin: 18rpx 0 0 8rpx;
		}
	}
}



</style>
